@{    ViewData["Title"] = "病人信息";}

<style>
    /* 全局样式 */
    body {
        font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
        color: #333;
        background-color: #f5f7fa;
    }
    
    /* 页面容器 */
    .page-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 20px;
    }
    
    /* 卡片容器 */
    .info-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }
    
    /* 页面标题栏 */
    .patient-info-header {
        background: linear-gradient(135deg, #00a65a, #008d4c);
        color: white;
        padding: 16px 24px;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header-actions .btn {
        margin-left: 8px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .header-actions .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    
    /* 搜索区域 */
    .search-container {
        padding: 24px;
        border-bottom: 1px solid #e9ecef;
        background-color: #fafbfc;
    }
    
    .search-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
    }
    
    .search-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .search-item label {
        margin-bottom: 0;
        font-weight: 600;
        white-space: nowrap;
        color: #555;
        font-size: 14px;
    }
    
    .search-item input, 
    .search-item select {
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 14px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        background-color: white;
        min-width: 180px;
    }
    
    .search-item input:focus, 
    .search-item select:focus {
        outline: none;
        border-color: #00a65a;
        box-shadow: 0 0 0 2px rgba(0, 166, 90, 0.1);
    }
    
    /* 按钮样式 */
    .search-btn {
        background: linear-gradient(135deg, #3c8dbc, #286090);
        color: white;
        border: none;
        padding: 8px 24px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .search-btn:hover {
        background: linear-gradient(135deg, #367fa9, #23527c);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .search-btn:active {
        transform: translateY(0);
    }
    
    /* 表格样式 */
    .table-container {
        overflow-x: auto;
    }
    
    .patient-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }
    
    .patient-table thead {
        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    }
    
    .patient-table th {
        padding: 12px 16px;
        text-align: center;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #00a65a;
        position: relative;
    }
    
    .patient-table th::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #008d4c;
        transition: width 0.3s ease;
    }
    
    .patient-table th:hover::after {
        width: 100%;
    }
    
    .patient-table td {
        padding: 12px 16px;
        text-align: center;
        border-bottom: 1px solid #e9ecef;
        transition: background-color 0.2s ease;
    }
    
    .patient-table tbody tr {
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }
    
    .patient-table tbody tr::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 0;
        background-color: #00a65a;
        transition: height 0.3s ease;
    }
    
    .patient-table tbody tr:hover {
        background-color: #f8f9fa;
        transform: translateX(2px);
    }
    
    .patient-table tbody tr:hover::before {
        height: 100%;
    }
    
    /* 无数据状态 */
    .no-data {
        text-align: center;
        padding: 40px 20px;
        color: #6c757d;
    }
    
    .no-data-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    
    /* 加载状态 */
    .loading-container {
        text-align: center;
        padding: 40px 20px;
    }
    
    .loading-spinner {
        border: 3px solid rgba(0, 166, 90, 0.1);
        border-top: 3px solid #00a65a;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin: 0 auto 16px;
    }
    
    .loading-text {
        color: #6c757d;
        font-weight: 500;
    }
    
    /* 响应式设计使用CSS类替代媒体查询 */
    .responsive-container {
        /* 基础响应式样式 */
        padding: 10px;
    }
    
    .responsive-row {
        /* 基础响应式行样式 */
        display: block;
    }
    
    .responsive-item {
        /* 基础响应式项目样式 */
        display: block;
        width: 100%;
    }
    
    .responsive-header {
        /* 基础响应式头部样式 */
        display: block;
        text-align: center;
    }
</style>

<div class="page-container">
    <!-- 主卡片容器 -->
    <div class="info-card">
        <!-- 页面标题 -->
        <div class="patient-info-header">
            <span>病人信息</span>
            <div class="header-actions">
                <a href="@Url.Action("Index", "Patients")" class="btn btn-light btn-sm">返回</a>
            </div>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-container">
            <form id="patientSearchForm">
                <div class="search-row">
                    <div class="search-item">
                        <label for="startDate">入科时间:</label>
                        <input type="datetime-local" id="startDate" name="startDate" value="2025-10-27T16:15:07">
                    </div>
                    <div class="search-item">
                        <label>至</label>
                        <input type="datetime-local" id="endDate" name="endDate" value="2025-10-27T16:15:07">
                    </div>
                    <div class="search-item">
                        <label for="patientName">姓名:</label>
                        <input type="text" id="patientName" name="patientName" placeholder="请输入姓名">
                    </div>
                    <div class="search-item">
                        <label for="bedNumber">位牌号:</label>
                        <input type="text" id="bedNumber" name="bedNumber" placeholder="请输入位牌号">
                    </div>
                    <div class="search-item">
                        <label for="dischargeType">出科类型:</label>
                        <select id="dischargeType" name="dischargeType">
                            <option value="">全部</option>
                            <option value="normal">正常出科</option>
                            <option value="transfer">转科</option>
                            <option value="death">死亡</option>
                        </select>
                    </div>
                    <div class="search-item" style="margin-left: auto;">
                        <button type="button" class="search-btn" onclick="searchPatients()">查询</button>
                    </div>
                </div>
            </form>
        </div>
        
        <!-- 表格容器 -->
        <div class="table-container">
            <table class="patient-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>位牌号</th>
                        <th>民族</th>
                        <th>姓名</th>
                        <th>入院日期</th>
                        <th>性别</th>
                        <th>当前所在科室</th>
                        <th>诊断</th>
                        <th>床号</th>
                        <th>身高</th>
                        <th>体重</th>
                    </tr>
                </thead>
                <tbody id="patientTableBody">
                    <!-- 表格数据将通过JavaScript动态加载 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 设置默认日期时间为当前时间的前一天到当前时间
        const now = new Date();
        const yesterday = new Date(now);
        yesterday.setDate(yesterday.getDate() - 1);
        
        // 格式化日期时间为HTML5 datetime-local格式
        const formatDateTime = (date) => {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
        };
        
        // 设置日期输入框的默认值
        document.getElementById('startDate').value = formatDateTime(yesterday);
        document.getElementById('endDate').value = formatDateTime(now);
        
        // 初始化时加载一些示例数据
        loadSampleData();
    });
    
    // 加载示例数据
    function loadSampleData() {
        showLoading();
        
        // 模拟异步加载数据
        setTimeout(() => {
            const tableBody = document.getElementById('patientTableBody');
            tableBody.innerHTML = `
                <tr>
                    <td colspan="11" class="no-data">
                        <div class="no-data-icon">📋</div>
                        <div>暂无数据</div>
                    </td>
                </tr>
            `;
        }, 500);
    }
    
    // 搜索患者信息
    function searchPatients() {
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        const patientName = document.getElementById('patientName').value;
        const bedNumber = document.getElementById('bedNumber').value;
        const dischargeType = document.getElementById('dischargeType').value;
        
        // 显示加载状态
        showLoading();
        
        // 这里应该是AJAX请求到服务器获取数据
        // 由于是前端实现，这里仅做模拟
        setTimeout(() => {
            const tableBody = document.getElementById('patientTableBody');
            tableBody.innerHTML = `
                <tr>
                    <td colspan="11" class="no-data">
                        <div class="no-data-icon">📋</div>
                        <div>暂无数据</div>
                    </td>
                </tr>
            `;
            
            // 实际应用中，这里会根据服务器返回的数据动态生成表格行
        }, 500);
    }
    
    // 显示加载状态
    function showLoading() {
        const tableBody = document.getElementById('patientTableBody');
        tableBody.innerHTML = `
            <tr>
                <td colspan="11" class="loading-container">
                    <div class="loading-spinner"></div>
                    <div class="loading-text">正在查询数据...</div>
                </td>
            </tr>
        `;
    }
    
    // 支持回车键触发搜索
    document.getElementById('patientSearchForm').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchPatients();
        }
    });
    
    // 为输入框添加焦点样式增强
    document.querySelectorAll('.search-item input, .search-item select').forEach(element => {
        element.addEventListener('focus', function() {
            this.style.borderColor = '#00a65a';
            this.style.boxShadow = '0 0 0 2px rgba(0, 166, 90, 0.1)';
        });
        
        element.addEventListener('blur', function() {
            this.style.borderColor = '';
            this.style.boxShadow = '';
        });
    });
</script>



